<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡牌包和汉府功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .test-container {
            max-width: 1000px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
        }
        .game-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
        }
        .player-stats {
            display: flex;
            gap: 20px;
        }
        .stat {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .game-actions {
            display: flex;
            gap: 10px;
        }
        .btn-small {
            padding: 8px 12px;
            font-size: 0.9rem;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .btn-small:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }
        .btn-primary {
            background: #4CAF50;
            color: white;
        }
        .btn-secondary {
            background: #f44336;
            color: white;
        }
        .screen {
            display: none;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            margin: 20px 0;
        }
        .screen.active {
            display: block;
        }
        .deck-info {
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
            text-align: center;
        }
        .deck-tabs {
            display: flex;
            gap: 10px;
            margin: 20px 0;
            justify-content: center;
        }
        .tab-btn {
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .tab-btn.active {
            background: #ffd700;
            color: #333;
            border-color: #ffd700;
        }
        .deck-cards-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin: 20px 0;
            min-height: 200px;
            max-height: 400px;
            overflow-y: auto;
        }
        .deck-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: 2px solid #ffd700;
            border-radius: 10px;
            padding: 15px;
            min-width: 150px;
            text-align: center;
            position: relative;
        }
        .deck-card-upgraded {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            border-color: #4CAF50;
            color: white;
        }
        .deck-card-upgraded::after {
            content: "已升级";
            position: absolute;
            top: -5px;
            right: -5px;
            background: #4CAF50;
            color: white;
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 0.7rem;
            font-weight: bold;
        }
        .upgrade-info {
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
            text-align: center;
        }
        .upgrade-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: 2px solid #ffd700;
            border-radius: 10px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 150px;
            text-align: center;
            position: relative;
        }
        .upgrade-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
        }
        .hanfu-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin: 20px 0;
        }
        .hanfu-options button {
            padding: 15px 20px;
            font-size: 1.1rem;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .hanfu-options button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>卡牌包和汉府功能测试</h1>
        
        <!-- 游戏界面 -->
        <div id="game-screen" class="screen active">
            <div class="game-header">
                <div class="player-stats">
                    <div class="stat">
                        <span>❤️</span>
                        <span id="player-health">100</span>
                    </div>
                    <div class="stat">
                        <span>⚡</span>
                        <span id="player-energy">3</span>
                    </div>
                    <div class="stat">
                        <span>💰</span>
                        <span id="player-gold">150</span>
                    </div>
                </div>
                <div class="game-actions">
                    <button class="btn-small" onclick="game.showDeckView()">📚 卡牌包</button>
                    <button class="btn-small" onclick="game.showHanfu()">🏛️ 汉府</button>
                    <button class="btn-small btn-primary" onclick="game.endTurn()">结束回合</button>
                </div>
            </div>
            
            <div style="text-align: center; padding: 50px;">
                <h2>游戏主界面</h2>
                <p>点击右上角的按钮测试功能</p>
            </div>
        </div>

        <!-- 卡牌包查看界面 -->
        <div id="deck-view-screen" class="screen">
            <h2>卡牌包</h2>
            <div class="deck-info">
                <p>抽牌堆: <span id="deck-count">0</span> | 弃牌堆: <span id="discard-count">0</span> | 消耗牌堆: <span id="exhaust-count">0</span></p>
            </div>
            <div class="deck-tabs">
                <button class="tab-btn active" onclick="game.showDeckTab('draw')">抽牌堆</button>
                <button class="tab-btn" onclick="game.showDeckTab('discard')">弃牌堆</button>
                <button class="tab-btn" onclick="game.showDeckTab('exhaust')">消耗牌堆</button>
            </div>
            <div id="deck-cards-container" class="deck-cards-container">
                <!-- 卡牌将在这里显示 -->
            </div>
            <div style="text-align: center;">
                <button class="btn-secondary" onclick="game.closeDeckView()">关闭</button>
            </div>
        </div>

        <!-- 汉府界面 -->
        <div id="hanfu-screen" class="screen">
            <h2>汉府 - 休息与锻造</h2>
            <div class="hanfu-options">
                <button class="btn-primary" onclick="game.restAndHeal()">休息恢复 (免费)</button>
                <button class="btn-primary" onclick="game.showCardUpgrade()">升级卡牌 (50💰)</button>
                <button class="btn-primary" onclick="game.showCardRemoval()">移除卡牌 (75💰)</button>
            </div>
            <div style="text-align: center;">
                <button class="btn-secondary" onclick="game.leaveHanfu()">离开汉府</button>
            </div>
        </div>

        <!-- 卡牌升级界面 -->
        <div id="card-upgrade-screen" class="screen">
            <h2>选择要升级的卡牌</h2>
            <div class="upgrade-info">
                <p>花费: 50💰 | 剩余金币: <span id="upgrade-gold">150</span>💰</p>
            </div>
            <div id="upgrade-cards-container" class="deck-cards-container">
                <!-- 可升级的卡牌将在这里显示 -->
            </div>
            <div style="text-align: center;">
                <button class="btn-secondary" onclick="game.cancelCardUpgrade()">取消</button>
            </div>
        </div>
    </div>

    <script>
        // 功能测试
        class FeatureTest {
            constructor() {
                this.currentScreen = 'game-screen';
                this.playerGold = 150;
                this.playerDeck = [
                    { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                    { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                    { name: '防御', cost: 1, type: 'defend', block: 5, description: '获得5点护甲' },
                    { name: '愤怒', cost: 1, type: 'skill', strength: 2, description: '获得2点力量' },
                    { name: '终结', cost: 2, type: 'attack', damage: 15, description: '造成15点伤害，消耗' }
                ];
                this.playerDiscardPile = [
                    { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                    { name: '防御', cost: 1, type: 'defend', block: 5, description: '获得5点护甲' }
                ];
                this.playerExhaustPile = [
                    { name: '终结', cost: 2, type: 'attack', damage: 15, description: '造成15点伤害，消耗', upgraded: true }
                ];
            }
            
            showScreen(screenId) {
                document.querySelectorAll('.screen').forEach(screen => {
                    screen.classList.remove('active');
                });
                document.getElementById(screenId).classList.add('active');
                this.currentScreen = screenId;
            }
            
            showDeckView() {
                this.showScreen('deck-view-screen');
                this.updateDeckCounts();
                this.showDeckTab('draw');
            }
            
            updateDeckCounts() {
                document.getElementById('deck-count').textContent = this.playerDeck.length;
                document.getElementById('discard-count').textContent = this.playerDiscardPile.length;
                document.getElementById('exhaust-count').textContent = this.playerExhaustPile.length;
            }
            
            showDeckTab(tab) {
                // 更新标签按钮状态
                document.querySelectorAll('.tab-btn').forEach(btn => {
                    btn.classList.remove('active');
                });
                event.target.classList.add('active');

                // 显示对应卡牌堆
                const container = document.getElementById('deck-cards-container');
                container.innerHTML = '';

                let cards = [];
                switch (tab) {
                    case 'draw':
                        cards = this.playerDeck;
                        break;
                    case 'discard':
                        cards = this.playerDiscardPile;
                        break;
                    case 'exhaust':
                        cards = this.playerExhaustPile;
                        break;
                }

                if (cards.length === 0) {
                    container.innerHTML = '<p style="text-align: center; color: #ccc;">该卡牌堆为空</p>';
                    return;
                }

                // 按名称分组显示卡牌
                const cardGroups = this.groupCardsByName(cards);
                cardGroups.forEach(group => {
                    const cardElement = this.createDeckCardElement(group);
                    container.appendChild(cardElement);
                });
            }
            
            groupCardsByName(cards) {
                const groups = new Map();
                cards.forEach(card => {
                    const key = card.name;
                    if (!groups.has(key)) {
                        groups.set(key, { ...card, count: 0 });
                    }
                    groups.get(key).count++;
                });
                return Array.from(groups.values());
            }
            
            createDeckCardElement(card) {
                const cardElement = document.createElement('div');
                cardElement.className = 'deck-card';
                
                if (card.upgraded) {
                    cardElement.classList.add('deck-card-upgraded');
                }

                cardElement.innerHTML = `
                    <div style="font-weight: bold; margin-bottom: 8px;">${card.name}</div>
                    <div style="color: #ffd700; font-size: 0.9rem; margin-bottom: 5px;">消耗: ${card.cost}</div>
                    <div style="font-size: 0.8rem; opacity: 0.9; margin-bottom: 10px;">${card.description}</div>
                    <div style="color: #ffd700; font-weight: bold;">数量: ${card.count}</div>
                `;

                return cardElement;
            }
            
            closeDeckView() {
                this.showScreen('game-screen');
            }
            
            showHanfu() {
                this.showScreen('hanfu-screen');
            }
            
            restAndHeal() {
                alert('在汉府休息，恢复了30点生命值');
            }
            
            showCardUpgrade() {
                if (this.playerGold < 50) {
                    alert('金币不足，无法升级卡牌！');
                    return;
                }

                this.showScreen('card-upgrade-screen');
                this.renderUpgradeCards();
            }
            
            renderUpgradeCards() {
                const container = document.getElementById('upgrade-cards-container');
                const goldDisplay = document.getElementById('upgrade-gold');
                
                goldDisplay.textContent = this.playerGold;

                // 获取所有卡牌
                const allCards = [
                    ...this.playerDeck,
                    ...this.playerDiscardPile,
                    ...this.playerExhaustPile
                ];

                // 去重并过滤可升级的卡牌
                const uniqueCards = this.getUniqueCards(allCards);
                const upgradeableCards = uniqueCards.filter(card => !card.upgraded);

                container.innerHTML = '';

                if (upgradeableCards.length === 0) {
                    container.innerHTML = '<p style="text-align: center; color: #ccc;">没有可升级的卡牌</p>';
                    return;
                }

                upgradeableCards.forEach(card => {
                    const cardElement = this.createUpgradeCardElement(card);
                    container.appendChild(cardElement);
                });
            }
            
            getUniqueCards(cards) {
                const uniqueMap = new Map();
                cards.forEach(card => {
                    if (!uniqueMap.has(card.name) || !uniqueMap.get(card.name).upgraded) {
                        uniqueMap.set(card.name, card);
                    }
                });
                return Array.from(uniqueMap.values());
            }
            
            createUpgradeCardElement(card) {
                const cardElement = document.createElement('div');
                cardElement.className = 'upgrade-card';
                cardElement.dataset.cardName = card.name;

                const upgradedCard = this.getUpgradedCard(card);
                
                cardElement.innerHTML = `
                    <div style="font-weight: bold; margin-bottom: 8px;">${card.name}</div>
                    <div style="color: #ffd700; font-size: 0.9rem; margin-bottom: 5px;">消耗: ${card.cost} → ${upgradedCard.cost}</div>
                    <div style="font-size: 0.8rem; opacity: 0.9; margin-bottom: 10px;">
                        ${this.getCardUpgradeDescription(card, upgradedCard)}
                    </div>
                `;

                cardElement.addEventListener('click', () => {
                    this.selectCardForUpgrade(card);
                });

                return cardElement;
            }
            
            getCardUpgradeDescription(originalCard, upgradedCard) {
                let description = '';
                
                if (originalCard.damage && upgradedCard.damage) {
                    description += `伤害: ${originalCard.damage} → ${upgradedCard.damage}<br>`;
                }
                if (originalCard.block && upgradedCard.block) {
                    description += `护甲: ${originalCard.block} → ${upgradedCard.block}<br>`;
                }
                if (originalCard.strength && upgradedCard.strength) {
                    description += `力量: ${originalCard.strength} → ${upgradedCard.strength}<br>`;
                }

                return description || '效果增强';
            }
            
            getUpgradedCard(card) {
                const upgradedCard = { ...card };
                
                switch (card.name) {
                    case '攻击':
                        upgradedCard.damage = card.damage + 3;
                        upgradedCard.description = `造成${upgradedCard.damage}点伤害`;
                        break;
                    case '防御':
                        upgradedCard.block = card.block + 3;
                        upgradedCard.description = `获得${upgradedCard.block}点护甲`;
                        break;
                    case '愤怒':
                        upgradedCard.strength = (card.strength || 2) + 1;
                        upgradedCard.description = `获得${upgradedCard.strength}点力量`;
                        break;
                    case '终结':
                        upgradedCard.damage = card.damage + 5;
                        upgradedCard.description = `造成${upgradedCard.damage}点伤害，消耗`;
                        break;
                    default:
                        if (upgradedCard.cost > 0) {
                            upgradedCard.cost = Math.max(0, upgradedCard.cost - 1);
                        }
                        break;
                }

                return upgradedCard;
            }
            
            selectCardForUpgrade(card) {
                if (this.playerGold < 50) {
                    alert('金币不足！');
                    return;
                }

                // 升级卡牌
                this.upgradeCard(card);
                
                // 扣除金币
                this.playerGold -= 50;
                
                alert(`升级卡牌: ${card.name} (花费50💰)`);
                
                // 返回汉府界面
                this.showScreen('hanfu-screen');
            }
            
            upgradeCard(card) {
                const upgradedCard = this.getUpgradedCard(card);
                upgradedCard.upgraded = true;

                // 更新所有同名卡牌
                this.updateAllCardsWithName(card.name, upgradedCard);
            }
            
            updateAllCardsWithName(cardName, upgradedCard) {
                // 更新抽牌堆
                this.playerDeck.forEach(card => {
                    if (card.name === cardName) {
                        Object.assign(card, upgradedCard);
                    }
                });

                // 更新弃牌堆
                this.playerDiscardPile.forEach(card => {
                    if (card.name === cardName) {
                        Object.assign(card, upgradedCard);
                    }
                });

                // 更新消耗牌堆
                this.playerExhaustPile.forEach(card => {
                    if (card.name === cardName) {
                        Object.assign(card, upgradedCard);
                    }
                });
            }
            
            cancelCardUpgrade() {
                this.showScreen('hanfu-screen');
            }
            
            showCardRemoval() {
                alert('卡牌移除功能待实现');
            }
            
            leaveHanfu() {
                this.showScreen('game-screen');
            }
            
            endTurn() {
                alert('回合结束');
            }
        }
        
        // 初始化测试
        const game = new FeatureTest();
    </script>
</body>
</html>
